<template>
	<div class="content">
		<div class="base">
			<Form inline class="fl">
				<Input type="text" placeholder="请输入产品编号" class="w200 m-r10" v-model.trim="userID" />
				<DatePicker type="daterange" split-panels placeholder="请选择时间" class="w200 m-r10" format="yyyy-MM-dd HH:mm:ss" @on-change="getTime">
				</DatePicker>
				<Button type="primary" @click="queryOne">查询</Button>
			</Form>
		</div>
		<div class="tar m-b10">
			<Button type="primary" @click="add">添加</Button>
		</div>
		<Table ref="selection" :columns="columns4" :data="list"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="changepage" />
		<!-- 添加 -->
		<Modal v-model="modal1" title="添加产品" width='40%' @on-ok="addjj">
			<Form :label-width="100" :model="addForm" ref="addUserForm" :rules="rules">
				<FormItem label="标题" prop='title'>
					<Input class="w-50" v-model="addForm.title" placeholder="请输入标题" />
				</FormItem>
				<FormItem label="关键字" prop='title'>
					<Input class="w-50" v-model="addForm.keyWord" placeholder="请输入关键字，请以英文逗号分隔" />
					<span class="red m-l10">关键字请以英文逗号分隔</span>
				</FormItem>
				<FormItem label="库存" prop='title'>
					<Input class="w-50" v-model="addForm.repertory" placeholder="请输入库存" />
				</FormItem>
				<FormItem label="单价" prop='title'>
					<Input class="w-50" v-model="addForm.unitPrice" placeholder="请输入单价" />
				</FormItem>
				<FormItem label="比例" prop='title'>
					<Input class="w-50" v-model="addForm.portion" placeholder="请输入比例" />
					<span class="red m-l10">一份等于X瓶茅仙酒</span>
				</FormItem>
				<FormItem label="支付类型" style="display: none;">
					<Select placeholder="请选择支付类型" class="w-50" v-model="addForm.payType">
						<Option value="1">广告值</Option>
						<Option value="2">USDT</Option>
					</Select>
				</FormItem>
				<FormItem label="建议图片尺寸">
					宽：750px 高：400px
				</FormItem>
				<FormItem label="图片格式">
					jpg、gif、png
				</FormItem>
				<FormItem label="图片大小">
					不超过10mb
				</FormItem>
				<template>
					<Upload multiple type="drag" action="https://admin.catchon.vip/admin/operating/uploadpicture" :headers='myHeaders' :on-success='handleSuccess' name="imgUrl">
						<div style="padding: 20px 0">
							<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
							<p>上传图片</p>
						</div>
					</Upload>
				</template>
			</Form>
		</Modal>
		<!-- 修改 -->
		<Modal v-model="modal3" title="修改产品" width='40%' @on-ok="emitjj">
			<Form :label-width="100" :model="editForm" ref="addUserForm" :rules="rules1">
				<FormItem label="标题" prop='title'>
					<Input class="w-50" v-model="editForm.title" placeholder="请输入标题" />
				</FormItem>
				<FormItem label="关键字" prop='title'>
					<Input class="w-50" v-model="editForm.keyWord" placeholder="请输入关键字，请以英文逗号分隔" />
					<span class="red m-l10">关键字请以英文逗号分隔</span>
				</FormItem>
				<FormItem label="库存" prop='title'>
					<Input class="w-50" v-model="editForm.repertory" placeholder="请输入库存" />
				</FormItem>
				<FormItem label="单价" prop='title'>
					<Input class="w-50" v-model="editForm.unitPrice" placeholder="请输入单价" />
				</FormItem>
				<FormItem label="比例" prop='title'>
					<Input class="w-50" v-model="editForm.portion" placeholder="请输入比例" />
					<span class="red m-l10">一份等于X瓶茅仙酒</span>
				</FormItem>
				<FormItem label="支付类型" style="display: none;">
					<Select placeholder="请选择支付类型" class="w-50" v-model="editForm.payType">
						<Option value="1">广告值</Option>
						<Option value="2">USDT</Option>
					</Select>
				</FormItem>
				<FormItem label="当前图片">
					<img :src="editForm.imgUrl" alt="" width="200">
				</FormItem>
				<template>
					<Upload multiple type="drag" action="https://admin.catchon.vip/admin/operating/uploadpicture" :headers='myHeaders' :on-success='handleSuccess' name="imgUrl">
						<div style="padding: 20px 0">
							<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
							<p>上传图片</p>
						</div>
					</Upload>
				</template>
			</Form>
		</Modal>
	</div>
</template>
<script>
	let token = localStorage.getItem('mytoken');
	export default {
		data() {
			return {
				myHeaders: {
					Authorization: 'bearer ' + token
				},
				list: [],
				userID: '',
				id: '',
				dataValue: [], // 时间段值
				wjid: '',
				falg: false,
				// // 分页
				info: null, // 总条数
				page: 1, // 页数
				pageSize: 20, // 每页多少条
				editorOption: {},
				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}],
					key: [{
						required: true,
						message: '请输入关键字',
						trigger: 'blur'
					}],
					shouyi: [{
						required: true,
						message: '请输入日收益百分比',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}]
				},
				rules1: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}],
					key: [{
						required: true,
						message: '请输入关键字',
						trigger: 'blur'
					}],
					shouyi: [{
						required: true,
						message: '请输入日收益百分比',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}]
				},
				modal1: false,
				modal2: false,
				modal3: false,
				addForm: {
					languageId: '',
					imgUrl: '',
					title: '',
					keyWord: '',
					repertory: '',
					unitPrice: '',
					payType: '1',
					portion: ''
				},
				editForm: {
					languageId: '',
					imgUrl: '',
					title: '',
					keyWord: '',
					repertory: '',
					unitPrice: '',
					payType: '1',
					portion: ''
				},
				index: '',
				columns4: [{
						title: '编号',
						key: 'productNum'
					}, {
						title: '标题',
						key: 'title'
					},
					{
						title: '图片',
						key: 'imgUrl',
						render: (h, params) => {
							return h('div', [
								h('img', {
									attrs: {
										src: this.list[params.index].imgUrl,
										preview: '1'
									},
									style: {
										width: '70px',
										margin: '10px 0'
									}
								})
							])
						}
					},
					{
						title: '关键字',
						key: 'keyWord'
					},
					{
						title: '库存',
						key: 'repertory'
					},
					{
						title: '单价',
						key: 'unitPrice'
					},
					{
						title: '状态',
						key: 'statusId',
						render: (h, params) => {
							if(this.list[params.index].statusId == 1) {
								return h('div', '删除 ')
							} else if(this.list[params.index].statusId == 2) {
								return h('div', '热销')
							} else if(this.list[params.index].statusId == 3) {
								return h('div', '已售罄')
							}
						}
					},
					{
						title: '操作',
						key: 'action',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h(
									'Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},
										on: {
											click: () => {
												this.emit(this.list[params.index].id)
											}
										}
									},
									'修改'
								),
								h(
									'Button', {
										props: {
											type: 'error',
											size: 'small'
										},
										on: {
											click: () => {
												this.remove(this.list[params.index].id)
											}
										}
									},
									'删除'
								)
							])
						}
					}
				]
			}
		},
		methods: {
			// 添加
			add() {
				this.modal1 = true
			},
			// 处理时间段时间格式
			getTime(daterange) {
				this.dataValue = daterange
			},
			addjj() {
				let reg = /[^\d^\.]+/g
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					title: this.addForm.title,
					keyWord: this.addForm.keyWord,
					imgUrl: this.addForm.imgUrl,
					repertory: this.addForm.repertory,
					unitPrice: this.addForm.unitPrice,
					payType: 1,
					portion: this.addForm.portion
				})
				// console.log(params);
				this.axios
					.post('product/add', params, {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						if(res.data.code == 8008) {
							this.$Message.info(res.data.message)
							this.getList()
							this.addForm.repertory = null
							this.addForm.imgUrl = null
							this.addForm.keyWord = null
							this.addForm.title = null
							this.addForm.portion = null
						} else if(res.data.code == 4004) {
							this.$Message.info(res.data.message)
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			},
			// 修改
			emit(id) {
				let token = localStorage.getItem('mytoken')
				this.modal3 = true
				this.wjid = id
				this.axios
					.get('product/' + id, {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						// console.log(res)
						if(res.data.code == 8008) {
//							this.editForm.languageId = res.data.data.fundProConfig.languageId
//							this.editForm.bizhong = `${res.data.data.fundProConfig.currencyType}`
//							this.editForm.title = res.data.data.fundProConfig.title
//							this.editForm.keyword = res.data.data.fundProConfig.keyWord
//							this.editForm.shouyi = res.data.data.fundProConfig.income
//							this.editForm.num = res.data.data.fundProConfig.num
//							this.editForm.content = res.data.data.fundProConfig.content
							this.editForm.title= res.data.data.product.title;
							this.editForm.keyWord= res.data.data.product.keyWord;
							this.editForm.imgUrl=res.data.data.product.imgUrl;
							this.editForm.repertory=res.data.data.product.repertory;
							this.editForm.unitPrice=res.data.data.product.unitPrice;
							this.editForm.payType=1;
							this.editForm.portion = res.data.data.product.portion
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			},
			emitjj() {
				let reg = /[^\d^\.]+/g
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					id: this.wjid,
					title: this.editForm.title,
					keyWord: this.editForm.keyWord,
					imgUrl: this.editForm.imgUrl,
					repertory: this.editForm.repertory,
					unitPrice: this.editForm.unitPrice,
					payType: 1,
					portion: this.editForm.portion
				})
				this.axios
					.put('product/update', params, {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						if(res.data.code == 8008) {
							this.$Message.info(res.data.message)
							this.getList()
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			},
			// 删除
			remove(id) {
				let token = localStorage.getItem('mytoken')
				this.axios
					.delete('product/delete/' + id, {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						if(res.data.code == 8008) {
							this.$Message.info(res.data.message)
							this.getList()
						} else if(res.data.code == 4004) {
							this.$Message.info(res.data.message)
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			},
			// 获取所有
			getList() {
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					pn: this.page,
					pageSize: this.pageSize
				})
				this.axios
					.post('product/query/all', params, {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						// console.log(res)
						if(res.data.code == 8008) {
							this.list = res.data.data.products;
							this.info = res.data.data.total;
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			},
			queryOne() {
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					pn: this.page,
					pageSize: this.pageSize,
					title: this.userID,
					startTime: this.dataValue[0] == '' ? '2000-12-30 00:00:00' : this.dataValue[0], // 起始日期
					endTime: this.dataValue[1] == '' ? '2200-12-30 00:00:00' : this.dataValue[1] // 结束日期
				})
				this.axios
					.post('product/query/all', params, {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						// console.log(res)
						if(res.data.code == 8008 || res.data.code == 4004) {
							this.list = res.data.data.products;
							this.info = res.data.data.total;
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			},
			// 分页
			changepage(page) {
				this.page = page
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					pn: page,
					pageSize: this.pageSize
				})
				// console.log(params)
				this.axios.post('product/query/all', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.list = res.data.data.products
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message)
						localStorage.removeItem('mytoken')
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			// 富文本编辑器
			onEditorBlur() {
				// 失去焦点事件
			},
			onEditorFocus() {
				// 获得焦点事件
			},
			onEditorChange() {
				// 内容改变事件
			},
			// 获取上传图片的地址
			handleSuccess(res, file) {
				this.addForm.imgUrl = res.data.path;
				this.editForm.imgUrl = res.data.path;
			}
		},
		created() {
			this.getList()
		},
		mounted() {
			this.$Message.config({
				top: 250
			})
		}
	}
</script>